<template>
	<div class="song-list">
		<ul>
<<<<<<< HEAD
			<li class="item" v-for="(songs,index) in songs" @click="selectItem(songs,index)">
				<div class="content">
					<h2 class="name no-wrap">{{songs.name}}</h2>
					<p class="desc no-wrap">{{songs.singer}}·{{songs.album}}</p>
=======
			<li class="item" v-for="(song,index) in songs" @click="selectItem(song,index)">
				<div class="content">
					<h2 class="name no-wrap">{{song.name}}</h2>
					<p class="desc no-wrap">{{getDesc(song)}}</p>
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		props:{
			songs:{
				type:Array,
<<<<<<< HEAD
				defaule:[]
			}
		},
		methods:{
			selectItem(songs,index){
				this.$emit('selected',songs,index)
=======
				default:[]
			}
		},
		methods:{
			getDesc(song){
				return `${song.singer}·${song.album}`
			},
			selectItem(item,index){
				this.$emit('select',item,index)
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
			}
		}
	}
</script>

<style scoped lang="less">
	@import "~assets/less/variable";
	@import '~assets/less/mixin';
	.song-list {
      	.item {
          	display: flex;
          	align-items: center;
          	box-sizing: border-box;
          	height: 64px;
          	font-size: @font-size-medium;
          	.content {
              	flex: 1;
              	line-height: 20px;
              	overflow: hidden;
              	.name {
                  	color: @color-text;
              	}
              	.desc {
                  	margin-top: 4px;
                  	color: @color-text-d;
              	}
          	}
      	}
  }
</style>